Workshop 


Beveilig de afbeeldingen op je webstek 


Een figuur om te ste 


Je kiekjes blijken echt wel in de smaak te vallen, en nu je ze een ereplaats op je site hebt 


gegund, krijg je zelfs felicitaties uit onverwachte hoek! Minder leuk is dat ze nu zomaar 


voor het grabbelen liggen, voor iedereen die ze - zonder jouw toelating - wil kopiëren … 


een zeldzame roodpootvalk in de vlucht hebt verrast, die 

kiekjes van jou mogen er best wezen! Alleen aarzel je nog 
om ze op je webstek te plaatsen, want wie weet slepen anderen wel 
een prijs in de wacht met jouw creaties! Hoe kan je voorkomen dat 
anonieme surfers die fraaie afbeeldingen op je webstek heimelijk 
kopiëren? Je kan je plaatjes natuurlijk in een pijnlijk lage resolu- 
tie op je webstek droppen, en je bezoekers verplichten om je eerst 
een mailtje te sturen. De kwaliteitsfoto’s kan je dan als bijlage aan 
je antwoord hangen, of je kan in je mailtje naar het correcte pagi- 
na-adres verwijzen. Het is alleen de vraag wie daartoe bereid zal 
zijn (naast de rompslomp die dat voor jou meebrengt) en of dat 
voldoende zal afschrikken om je foto’s niet langer te kopiëren. Iets 
minder drastisch is dat je met behulp van een beeldbewerking- 
programma een ©-symbool met je naam op de foto’s plaatst — maar 
daarmee vergal je natuurlijk wel een stukje de kijkpret. 
Zijn er dan echt geen andere, meer geavanceerde methodes? Tóch 
wel - verschillende zelfs - maar aan elke oplossing kleeft wel een 
of ander nadeel, en we kunnen het je net zo goed meteen vertel- 
len: nagenoeg geen enkele methode biedt je roo % garantie. Dat 
is overigens niet zo verwonderlijk, want er zijn verschillende ma- 
nieren waarop je afbeeldingen te kopiëren zijn. Dat kan bijvoor- 
beeld vanuit de browser gebeuren, via een klik met de rechter- 
muistoets (AFBEELDING OPSLAAN ALS), maar net zo goed via de PRT 
ScR-toets of met behulp van een meer geavanceerde tool voor het 
nemen van screenshots. Vergeet niet dat ook de browsercache ge- 
woonlijk nog een kopie van de afbeeldingen bijhoudt: ga maar even 
na wat er zich allemaal in je eigen tijdelijke bestanden bevindt (open 
in Internet Explorer het menu EXTRA, kies INTERNET-OPTIES, ga naar 
het tabblad ALGEMEEN, druk op de knop INSTELLINGEN en vervolgens 
op BESTANDEN WEERGEVEN)! En natuurlijk dreigen je kiekjes ook nog 
eens in de databanken van allerlei zoekrobots terecht te komen. 
Google bijvoorbeeld heeft intussen al zo’n 425 miljoen afbeeldin- 
gen bij elkaar weten te sprokkelen! 


O f je nu met je telelens een BV te grazen hebt genomen, of 


Ben je toch zinnens het al gemen 
die sluikkopieerders knap Z Wanneer moet er op nieuwe versies van pagina's worden gecontroleerd? 
lastigte maken? Dan benje | MM Ofbeoekaan een pane 

ke EA O Telkens wanneer Internet Explorer wordt gestart 
hier aan het juiste adres, O autometisch 
want we schotelen je een oen 
hele rist technieken voor 
waarmee je precies dát kan 
doen! Zoals je merkt, heb- 
ben we ons arsenaal opge- 
splitst in drie delen: html- 
technieken, JavaScripts en 
gespecialiseerde tools. 


Map met tijdelijke Internet-bestanden 


C:\Documents and Settings\Toon\Local 
Settings\Temporary Internet Files! 


Huidige locatie: 


Te gebruiken schijfruimte: 


J Í 500 | me 


f EN Pe Osten NT 


De browsercache: nog meer kopietjes! 


1. HTML 


Zoals je weet is html (hypertext markup language) de taal waarin 
de meeste webpagina's geschreven worden. Best handig natuur- 
lijk als je een mondje html’s kan meepraten, maar we zijn al dik 
tevreden als je met een gebruiksvriendelijke webeditor als Micro- 
soft Frontpage overweg kan… 


Stap 1 
Slicing 


We beginnen bescheiden: met deze methode hou je namelijk geen 
enkele kopieerpoging tegen… Wel bederf je de pret van de piraat 
door je afbeeldingen in verschillende stukjes te hakken (slicing) en 
die via html-tabellen op je webpagina weer naadloos aan elkaar te 
rijgen. Een argeloze surfer 
merkt daar zo goed als niks 
van, maar wie je afbeelding 
wil kopiëren, moet dat in 
stukjes doen om die nadien 
zelf weer aan elkaar te plak- 
ken. 

Je hebt er natuurlijk zelf ook 
flink wat werk aan… Via je 
beeldbewerker moet je de af- 
beelding eerst in een aantal 
stukjes zien te snijden, waar- 
na je elk stukje in een apart 
bestand onderbrengt (bij- 


@° Adobe ImageReady 


voorbeeld fotoliboven.jpg, 
fotoreboven.jpg, enzovoort). 


Tool voor screenshots aan 


het werk… Gevonden via Google, en meteen maar opslaan? De knipschaar van ImageReady. 
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JWaterteke. og html® \, 


Tabellen voor ‘slicing’ in Frontpage. 


Je moet ook de exacte afmetingen van elk stukje noteren. Vervol- 
gens start je je favoriete webeditor op en maak je een tabel aan, met 
cellen waarin elk stukje van je afbeelding precies past. Lukt je dat 
niet zo goed, dan krijg je op [ www.webniche.com/tablelesson/ta- 
bletutor.html ] heel wat hulp! 

Zie je toch nog op tegen al dit knipwerk, dan kan je natuurlijk ook 
uitkijken naar een beeldbewerker die dit ganse proces voor z’n re- 
kening neemt. Je hoeft dan alleen maar de gewenste stukjes te mar- 
keren: het programma bewaart ze automatisch in aparte bestand- 
jes én genereert meteen de nodige html-tabellen voor je webpagi- 
na! Onder meer ImageReady (Adobe) en Fireworks (Macromedia) 
kunnen met slicing overweg, en je kan op [ www.coffeecup. 
com/freestuff | zelfs een gratis slicer op de kop tikken: CoffeeCup 
Free Image Slicer! 


Stap 2 
Transparante laag 


Je kan ook nog listiger uit de (html-)hoek komen, met een techniek 
die bovendien iets minder arbeidsintensief is. Je plaatst je foto’s zo- 
als vanouds op je webpagina’s, maar ongemerkt hang je boven elke 
foto een geheel transparante figuur. Visueel geeft dat natuurlijk geen 
enkel verschil, maar wie de foto wil opslaan, zal slechts een ‘lege’ af- 
beelding te pakken krijgen. Om de verwarring compleet te maken, 
geef je aan die transparante afbeelding bovendien een naam die in- 
houdelijk dicht aanleunt bij de afbeelding eronder. Absolute voor- 
waarde voor dit foefje is wel dat je die doorzichtige figuur exact boven 
de eigenlijke foto weet te positioneren. Gelukkig ondersteunen re- 
cente html-versies én browsers het concept van lagen (layers), die je 
inderdaad tot op de pixel nauwkeurig kan plaatsen - ook bovenop een 


EEN KUSJE, EN WE SPREKEN 
ER NIET MEER OVER ! 


HOE DE AFBEELDINGEN oP 
JE SITE BEVEILIGEN … 


Joleuwe_pagina_thtm”\, 


Wat vind je van dit kiekje? 


andere laag. Liever dan je met de inge- 
wikkelde html-code te overvallen, tonen 
we je hoe je zoiets aanpakt in de web- | 
editor Frontpage. 

Plaats een foto in je webpagina. Klik in 
Frontpage met de rechtermuistoets op 
die foto en vraag er de eigenschappen 
van op. Noteer de exacte grootte (breed- 
te x hoogte) van je afbeelding. Voeg nu 
de transparante figuur toe aan diezelf- 
de pagina. Weet je niet hoe je zo’n figuur 
moet creëren, dan kan je er hier eentje 
downloaden: [ wwwvw.websight.be/clickx- 
/transparant.gif | (slechts 1 x 1 pixel groot. Om dit gif’je tijdelijk wat 
beter zichtbaar te maken, kan je er (via de html-weergave van Front- 
page) eventueel wel een rand aan toevoegen. Selecteer vervolgens dit 
gif je met de muis, ga naar het menu OPMAAK en kies Poste. Er ver- 
schijnt een dialoogvenster waar je als plaatsingsstijl ABsoruur kiest, 
en de breedte en hoogte gelijkstelt aan die van je eigenlijke foto. Bij 
Z-VOLGORDE vul je 1 in, waarmee je te kennen geeft dat het gifje in een 
‘hogere’ laag terecht dient te komen. Bevestig je instellingen, en po- 


foefje? 


Gif: Graphics Interchange Format, een gecomprimeerd formaat van afbeeldingen met 
maximaal 256 kleuren. Door de doorgedreven compressie is gif een ideaal formaat 
voor afbeeldingen op een website. 


Html: Hypertext markup language. Een soort computertaal waarmee webpagina's 
worden aangemaakt. Eigenlijk zijn html-pagina’s gewone tekstpagina’s met allerlei 
codes die verwijzen naar de kleur, de beelden, de opmaak en het geluid waarmee 
deze pagina’s in een browser worden getoond. 


JavaSeript: Door Netscape ontwikkelde scripttaal waarmee je html-pagina’s interac- 
tiever kan maken. 


Sereenshot: Ook wel screendump of schermafbeelding genoemd. Een afbeelding van 


hetgeen je ziet op het scherm. Je gebruikt hiervoor een toetsencombinatie of een 
speciaal daartoe bestemd programma. 


VEEL GELUK IN 2004 CLICKX MAGAZINE 57 - 30 DECEMBER 2003 ej 


De afbeelding, doorzichtiger dan het 


Eenzet metra beck frechesde vem 


Wat vind je van dit kiekje? 


At 


eZ 
ei 


sitioneer het transparante gifje met de muis pardoes over je foto (ver- 
wijder daarna de eventuele rand). Klaar is Kees! 

Ook deze methode is natuurlijk niet waterdicht — ze hoeven maar 
de correcte naam van je foto op te snorren in de broncode van de 
webpagina - maar een occasionele kopieerder zal zich alvast flink 
bij de neus genomen voelen. 


Stap 3 
Geen cache of robots 


Wil je voorkomen dat de browser van je bezoeker je afbeeldingen 
in zijn cache binnenhaalt, zodat hij wellicht op die manier je be- 
veiliging(en) weet te omzeilen, dan kan je de volgende metatags bin- 
nen de <HEAD>-tags van je html-code toevoegen. Een metatag is 
niks anders dan een aanduiding die speciale informatie (over de 
pagina zelf) bevat voor browsers en/of robots. 


<meta tag http-equiv="cache-control” 
content=“no-store”> 

<meta tag http-equiv="Pragma” content="no- 
cache”> 

<meta tag http-equiv="Expires” content="0"> 


Om al te grijplustige (zoek)robots af te remmen die je afbeeldin- 
gen willen cachen of in hun databanken willen stoppen, volstaat 
normaal gezien de volgende metatag: 


<meta name="robots” content="noindex, nofol- 
low, noimageindex, noimageclick, noarchive”> 


Concreet betekent dit: indexeer niets op deze pagina, volg evenmin 
links op deze pagina, indexeer zeker geen afbeeldingen, neem geen 
directe links naar de afbeeldingen zelf op, en stop ook niets in je ar- 
chieven. Daar zit natuurlijk wel wat redundantie tussen, maar hard- 
leerse robots zullen je boodschap zo des te beter begrijpen. Als je dat 
wil, kan je uiteraard ook een of meer content-parameters weglaten. 


2. JAVASCRIPT 


Doorgedreven webontwerpers liepen al snel tegen de beperkingen 
van de html-taal aan. Precies daarom voegde men wat extra kracht 
aan die taal toe, in de vorm van een programmeertaal: JavaScript. 
Het is handig als je ook hier wat kaas van gegeten hebt, maar echt 
noodzakelijk is dat niet. Met de combinatie van jouw webeditor en 
onze voorbeelden kom je al een héél eind… 


Stap 4 
Geen rechtermuisklik 


sen Hoe kopieer je het snelst een plaatje 
van een webstek? Juist, met behulp 
van de rechtermuistoets, waarna je 
in het snelmenu de optie AFBEELDING 
OPSLAAN ALS kiest. Maar wat als je er 
nu voor kan zorgen dat die rechter- 
muisklik bij elk bezoek van je web- 
pagina automatisch wordt uitge- 


BS Kleed 


Microsoft Intervet Explorer id 


A) ont atiet 
mam) 


De rechtermuistoets tikt je op de vingers. 
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schakeld, tenminste als er een afbeelding wordt aangeklikt? En dat 
is precies wat we met een snuifje JavaScript zullen doen. Voor wie 
het nog niet had geraden, ook dit trucje kan je jammer genoeg om- 
zeilen, bijvoorbeeld via de browsercache, door de html-code te ont- 
rafelen, door in de browser JavaScript uit te schakelen of via het 
menu BESTAND, OPSLAAN ALS... 

Wil je het toch zelf uitproberen, dan vind je op het internet ver- 
schillende gratis scriptjes die je op je eigen webpagina’s kan enten. 
We geven je alvast twee adressen: [ www.hypergurl.com/noright- 
click.html ] en [ www.clickforcontent.com/protect images.htm |. 
Wij kopieerden de - licht aangepaste - code uit het tweede adres op 
een lege html-pagina binnen Frontpage en voegden er vervolgens 
een eigen foto aan toe. Het resultaat kan je bekijken op [ www.web- 
sight.be/clickx/rechtsklik.htm |. 


Stap 5 
Rollover 


Je hebt het on line onge- 
twijfeld al tientallen keren 
gezien: zodra je op een 
webpagina met de muispijl 
over een grafisch object be- 
weegt, krijg je een andere 
of aangepaste afbeelding te zien. Zo’n effect noemen we een ‘roll- 
over’, en ook dat kunnen we inzetten om onze afbeeldingen (een 
schijn van) bescherming te bieden. Zo kan je bijvoorbeeld een trans- 
parante figuur of een copyrightberichtje over de echte foto laten rol- 
len. Beide figuren dienen wel over dezelfde afmetingen te beschik- 
ken. Wil de bezoeker je echte foto opslaan, dan krijgt hij in princi- 
pe enkel de tweede figuur te pakken. Hoeft het nog gezegd: een vast- 
beraden iemand weet ook dit trucje wel te omzeilen (zie stap 3). 

Je hebt er opnieuw wat JavaScript voor nodig, maar de betere web- 
editors (waaronder Macromedia DreamWeaver) nemen het leeu- 
wendeel van dit klusje op zich! Voor wie het toch manueel wil aan- 
pakken: de JavaScript-code, nodig voor dit stukje misleiding, laat 
zich vrij makkelijk ontrafelen. Dit stukje plaats je alvast tussen de 
<HEAD»>-tags van je html-code: 


Rollover met een angeltje. 


<script language="JavaScript”> 

foto = new Image 

transp = new Image 

foto.src= “beelden/kiekje. jpg” 
transp.src="beelden/transparant.gif” 
SCHEP 


Binnen de <BODY>-tags van je html-code voorzie je dan nog wat 
extra code, nabij de html-regels waarmee je de foto hebt opgeroe- 
pen. Let vooral op de vetgedrukte code, want die zal je wellicht ex- 
tra moeten toevoegen: 


<a href ="#" 
onMouseover="document.plaatje.src=transp. src” 
onMouseout="document.plaatje.src="foto.src”> 
<img src="beelden/kiekje.jpg” width="200" 
height="100" border="0" name="plaatje”></ar> 


Het komt er op neer dat je de browser in het eerste stukje JavaScript 
beide afbeeldingen al in zijn cache laat plaatsen. In het tweede deel 
zorg je er dan voor dat de ‘valse’ afbeelding wordt opgediept zodra 


je met de muispijl over de oorspronkelijke figuur beweegt. Op 
[ www.websight.be/clickx/rollover.htm | kan je dit geintje aan het 
werk zien. 


3. SPECIALE SOFTWARE 
& SERVICES 


Precies omdat er nog een en ander schort aan de beveiligings- 
technieken die we hierboven hebben besproken, zijn een aantal 
bedrijven op deze kar gesprongen. Ze hebben producten of dien- 
sten ontwikkeld die je een steviger beveiliging van je on line af- 
beeldingen — en vaak ook van andere items zoals tekst — kunnen 
garanderen. Ruwweg kunnen we twee uiteenlopende technieken 
onderscheiden: een met watermerken, en een die je afbeeldingen 
versleutelt of op een andere manier beveiligt - niet zelden met be- 
hulp van de programmeertaal Java. 


Stap 6 
Watermerk 


Zoals we in de inleiding al zeiden, kan je je naam of een of ander logo 
op je on line afbeeldingen plaatsen. Maar het kan ook veel heimelij- 
ker. Wat dacht je bijvoorbeeld van een onzichtbaar watermerk dat 
zich op een vernuftige manier in je foto weet te nestelen. Dat houdt 
weliswaar niemand tegen om het beeld te kopiëren, maar je kan ach- 
teraf wél altijd bewijzen dat de foto wel degelijk van jou afkomstig is. 
Dat watermerk krijg je namelijk niet zomaar weg uit je foto, zelfs niet 
na stevige manipulaties door een beeldbewerker. 

De onderliggende techniek is relatief eenvoudig: er wordt een ID- 
nummer in het beeld ingebed door bepaalde pixels te wijzigen, zon- 
der dat dit voor het oog merkbare verschillen oplevert. Zo’n proces 
noemen we ook wel eens steganografie, of ‘geheime schrijfkunst’. 
Een van de bekendste bedrijven is ongetwijfeld Digimarc [ wwvvw.digi- 
marc.com |, dat je bovendien een tool (MarcSpider) in handen geeft waar- 
mee je op het internet afbeeldingen kan opsporen die jouw watermerk 
zouden bevatten. Op hun webstek kan je alvast terecht voor een gratis 
download van ImageBridge Reader, waarmee je digitale watermerken 
kan detecteren en inlezen. Je vindt overigens ook een ingebouwde demo 
van Digimarc in een aantal beeldbewerkingprogramma’s, waaronder 
nieuwere versies van Adobe Photoshop (via het FirTeRr-menu). 


IC Adobe Photoshop 
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shark.jpg @ 100% (RGB) EEK) 
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Watermark Information 


Weight: |apx ||| ml Ll 


Digimarc ID: ImageBridge Demo 
Copyright Year. 2003 


Image Áttibutes: Restricted, Do Not Copy 


Creator Information 

For information about the creator of this image, 
click the Web Lookup which will connect youto 
Digimarc's MarcCentre(R) locator service. 


kk 


URL: [hup vvo digimarc. com/egibin/cipl43F4+Demo+0+200345 | 


Digimarc: onuitwisbaar watermerk. 


Stap 7 
Geavanceerde beveiligingen 


Andere tools pakken het minder onopvallend aan, en implemen- 
teren allerlei beveiligingstechnieken die het kopiëren in eerste in- 
stantie simpelweg onmogelijk moeten maken. 

Een van de bekendste is ArtistScope [ www.artistscope.com |, dat 
diverse tools aanbiedt waarmee je allerlei inhoud — waaronder tekst 
en afbeeldingen — van je webpagina’s tegen kopiëren kan beveili- 
gen. Op hun website kan je enkele demo’s bekijken, en een be- 
perkte versie van het product CopySafe PBV proefdraaien. Voor 
niet-commercieel gebruik kan je na registratie een gratis versie van 
Secure Image 2.2 downloaden, 
op [ http://artistscope.com/se- 
cure_image/free |. 

Het komt er gewoonlijk op 
neer dat je afbeeldingen met 
behulp van een Java-applet ver- 
sleuteld worden, en dat de be- 
zoeker een (gratis) plugin moet 
downloaden vooraleer hij je be- 
veiligde afbeeldingen kan be- 
kijken. 


© 


To view protected content you will need the latest Copysafe plugin. 


After installing, then return to the page last visited, 


H you keep returning to this page - slick here fer help 


Plugin vereist voor beveiligde plaatjes. 


BESLUIT 


Er bestaan een aantal handige trucs en technieken waarmee 
je het illegaal kopiëren van on line afbeeldingen kan 
bemoeilijken. De meeste daarvan vereisen enkel wat kennis 
van html en/of JavaScript. Het blijkt echter onmogelijk om 
daarmee het kopiëren geheel de pas af te snijden! Meer pro- 
fessionele oplossingen zijn gewoonlijk nogal duur, en som- 
mige technieken vereisen zelfs dat je bezoekers een (gratis) 
applet of ActiveX-component binnenhalen om beveiligde 
plaatjes op je webstek te kunnen bekijken. 


— Toon Van Daele — 


ActiveX(-component): Klein programma dat erg slank geschreven werd 
opdat het over het internet gebruikt en gestuurd kan worden. 
Websitebouwers kunnen met de ActiveX-controls allerlei interactieve ele- 
menten (knoppen laten werken, vensters tonen, …) aan een website toe- 
voegen. 


Applet: Een klein hulpprogrammaatje dat zich laat integreren in een webpa- 
gina. De webbezoeker zal het applet tijdens een surfbezoek via zijn browser 
inladen, zodat het bepaalde taken kan uitvoeren. De meeste applets zijn in 
de codetaal Java geschreven en kunnen worden gebruikt door computers 
met verschillende besturingssystemen. 


Metatag: Stukje html-code op een webpagina waarin je allerlei informatie 
over je html-document kwijt kan. Sommige zoekrobots kunnen deze infor- 
matie lezen. 
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